<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javaScript(3)</title>
<style type="text/css">
#mp {
	height: 100px;
	width: 100px;
	border: 2px solid red;
}

#mp p {
	height: 50px;
	width: 100px;
	border: 2px solid green;
}

#mp p input {
	height: 20px;
	width: 100px;
	line-height: 20px;
	text-align: center;
	background-color: blue;
	color: #fff;
	margin-top: 15px;
}

#panel {
	border: 4px solid #ddd;
	width: 192px;
	margin: 20px auto;
	border-radius: 3px;
	position: relative;
}

#screen {
	width: 122px;
	height: 26px;
	border: 1px solid #ddd;
	overflow: hidden;
	padding: 6px;
	line-height: 26px;
	text-align: right;
}

.btn {
	width: 40px;
	height: 40px;
	float: left;
	font-family: "黑体";
	font-size: 20px;
	margin: 4px;
	border-radius: 3px;
}

#C { /*强行定位*/
	position: absolute;
	left: 142px;
	top: 12px;
}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oInput = document.getElementsByTagName("input")[1];
		oInput.onclick = fun2;/*函数带（）表示调用，无()表示引用*/
	}
	function fun1(){
		console.log("在属性中直接处理事件");
	}
	function fun2(){
		console.log("动态定义事件绑定");
	}
	function fun3(){
		alert("事件冒泡--input");
	}
	function fun4(){
		alert("事件冒泡--p");
	}
	function fun5(){
		alert("事件冒泡--div");
	}
	function fun6(){
		alert(event.clientX+':'+event.clientY);
	}
	function fun7(event){/*兼容性写法*/
		alert(event.clientX+':'+event.clientY);
		console.log(event);
	}
	function fun8(event){
		console.log(event.srcElement);
	}
	function fun9(event){
		console.log(event.target);
		console.log(event.target || event.srcElement);/*兼容性写法*/
	}
	function delet(btn){
		btn.parentNode.removeChild(btn);
	}
	
	
	var flag = false;
	function cal(event){
		var obj = event.target || event.srcElement;
		//过滤掉p和div (不过滤会返回undefined)
		if(obj.nodeName =="INPUT"){
			var inputNum = obj.value;
			var oScreen = document.getElementById("screen");
			if(inputNum == "C"){
				oScreen.innerHTML = "0";
				flag = true;
			}else if(inputNum == "="){
				try{
					oScreen.innerHTML = eval("("+oScreen.innerHTML+")");
					flag = true;
				}catch(e){
					oScreen.innerHTML = "520.1314 Error!";
					console.log(e);
					flag = true;
				}
				
			}else{
				if(flag){
				oScreen.innerHTML = "";
				}
				oScreen.innerHTML += inputNum;
				flag = false;
			}
		}
		
	}
	
	//1.采用直接量的方式创建对象
    function fun10() {
        var student = {
                "name":"zhangsan",
                "age":25,
                "job":function(){alert(this.name+"学Java")}
        };
        alert(student.name);
        alert(student.age);
        student.job();
    }
    //2.1采用JS内置构造器创建对象
    //在JS里用来new的函数就是构造器
    function fun11() {
        var teacher = new Object();
        teacher.name = "cang";
        teacher.age = 18;
        teacher.job = function(){
            alert(this.name+"教Java");
        };
        
        alert(teacher.name);
        alert(teacher.age);
        teacher.job();
    }
    //2.2采用自定义构造器创建对象
    //1)定义构造器
    //2)声明参数
    function Coder(name,age,job) {
        //this代表当前对象
        //this.name是给此对象加1个属性叫name
        //=name是将参数name赋值给这个属性
        this.name = name;
        this.age = age;
        this.work = job;
    }
    //3)new这个构造器获得一个对象
    function fun12() {
        var coder = new Coder("lisi",26,
            function(){alert(this.name+"写Java");});
        alert(coder.name);
        alert(coder.age);
        coder.work();
    }

</script>
</head>
<body>
	<h1>四、javaScript事件处理机制:</h1>
	<h2>1.事件处理</h2>
	<p>鼠标事件:onclick,ondblclick,onmouseover,onmouseout,onmousedown,onmouseup</p>
	<p>键盘事件:onkeydown,onkeyup</p>
	<p>状态改变事件:onload,onchange,onfocus,onblur,onsubmit</p>
	<h2>2.事件绑定</h2>
	<input type="button" value="在属性中直接处理事件" onclick="fun1();">
	<input type="button" value="动态定义事件绑定">
	<h2>3.事件冒泡</h2>
	<div onclick="fun5();" id="mp">
		<p onclick="fun4(); event.cancelBubble=true">
			<!--取消冒泡事件,不再传入外层-->
			<input type="button" value="事件冒泡" onclick="fun3();">
		</p>
	</div>
	<h2>4.获取事件源</h2>
	<input type="button" value="在html属性中直接使用event对象--ie ff chrome"
		onclick="alert(event.clientX+':'+event.clientY)">
	<input type="button" value="在JS代码中获取event--chrome ie" onclick="fun6();">
	<input type="button" value="在JS代码中获取event--ff chrome ie"
		onclick="fun7(event);">
	<input type="button" value="获取事件源--chrome ie" onclick="fun8(event);">
	<input type="button" value="获取事件源--ff chrome" onclick="fun9(event);">
	<h2>5.this的简单用法</h2>
	<input type="button" value="删除自己1" onclick="delet(this);">
	<input type="button" value="删除自己2" onclick="delet(this);">
	<input type="button" value="删除自己3" onclick="delet(this);">
	<input type="button" value="删除自己4" onclick="delet(this);">
	<input type="button" value="删除自己5" onclick="delet(this);">
	<h2>6.简易计算器</h2>

	<div id="panel" onclick="cal(event);">
		<div>
			<p id="screen"></p>
			<input type="button" value="C" class="btn" id="C">
		</div>
		<div>
			<input type="button" value="7" class="btn"> <input
				type="button" value="8" class="btn"> <input type="button"
				value="9" class="btn"> <input type="button" value="/"
				class="btn"> <input type="button" value="4" class="btn">
			<input type="button" value="5" class="btn"> <input
				type="button" value="6" class="btn"> <input type="button"
				value="*" class="btn"> <input type="button" value="1"
				class="btn"> <input type="button" value="2" class="btn">
			<input type="button" value="3" class="btn"> <input
				type="button" value="-" class="btn"> <input type="button"
				value="0" class="btn"> <input type="button" value="."
				class="btn"> <input type="button" value="=" class="btn">
			<input type="button" value="+" class="btn">
		</div>
		<div style="clear: both;"></div>
		<!--克服高度坍塌-->
	</div>

	<h1>五、面向对象</h1>
	<input type="button" value="采用直接量的方式创建对象" onclick="fun10();" />
	<input type="button" value="采用JS内置构造器创建对象" onclick="fun11();" />
	<input type="button" value="采用自定义构造器创建对象" onclick="fun12();" />

	<h2>其他</h2>
	1.document.write("hello");可直接向HTML输出流中读写内容(直接在网页中输出内容,写在body的script标签中)
	<br>
	2.window.open([url],[窗口名称],[参数字符串]);参数字符串里面的各对参数直接用逗号隔开,用于查找一个已经存在或者新建的浏览器窗口
	<br> 3.window.close();或者 窗口对象.close(); 关闭指定的窗口
	<br> 4.object(标签对象).style.property(属性)=new style(新属性值);
	js中属性值中不带下划线,eg:fontsize
	<br> 5.object(标签对象).style.display = value(新值);
	<br> 6.object.className = classname; 改变class样式
	<br>
	7.js的数组:空值为undefined,动态数组length可变,指定的数组下标长度可以被超过,字面量数组用[],js里没有集合,数组连接用concat(),此方法返回新数组,不改变原来的值
	,数组反转用reserve();join(分隔符)用于把数组中的所有元素放入一个字符串,再通过制定的分隔符进行分隔;objarray.slice(start,end)截取子数组,原数组不变
	<br> 8.onselect 内容选中事件
	onunload卸载事件(退出页面,关闭页面,刷新页面时触发,不同浏览器支持情况可能不同)
	<br> 9.objName.propertyname 访问对象属性;objname.methodname 访问对象方法;
	<br> 10.Math对象可直接使用 Math.round(0.5)=1;





</body>
</html>